import { useNavigate } from "react-router-dom";
import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
import { Avatar, Dropdown, Flex, type MenuProps } from "antd";
import { ROUTE_PATHS } from "@/constants/common";
import { AUTHORIZATION_TOKEN } from "@/constants/common";
import { getUserInfo } from "@/stores/modules/userinfo";

export default function UserAvatar() {
  const navigate = useNavigate();

  const { name } = getUserInfo();

  const items: MenuProps["items"] = [
    {
      key: "loginOut",
      label: (
        <>
          <LogoutOutlined className="mr-2" /> 退出登录
        </>
      ),
      onClick: () => {
        navigate(ROUTE_PATHS.login);
        localStorage.removeItem(AUTHORIZATION_TOKEN);
      },
    },
  ];

  return (
    <Dropdown menu={{ items }} trigger={["click"]}>
      <Flex align="center" gap={4} className="cursor-pointer">
        <Avatar size={30} shape="circle" style={{ backgroundColor: "#87d068" }} icon={<UserOutlined />} />
        <div className="text-sm">{name}</div>
      </Flex>
    </Dropdown>
  );
}
